import { Card, Col, Image, Radio, type RadioChangeEvent, Row, Spin } from 'antd'
import type { CheckboxGroupProps } from 'antd/es/checkbox'
import { getRoomList } from '../../api/room.ts'
import { useEffect, useState } from 'react'

interface RoomType {
  id: number
  roomNumber: number
  decorationType: '毛坯' | '精装'
  area: number
  unitPrice: number
  src: string
}

export default function Room() {
  const options: CheckboxGroupProps<string>['options'] = [
    { label: 'A1栋写字楼', value: 'A1' },
    { label: 'A2栋写字楼', value: 'A2' },
    { label: 'B1栋写字楼', value: 'B1' },
    { label: 'B2栋写字楼', value: 'B2' },
    { label: 'C1栋写字楼', value: 'C1' },
    { label: 'C2栋写字楼', value: 'C2' },
  ]

  const [type, setType] = useState<string>('')

  const [src, setSrc] = useState('')
  const [visible, setVisible] = useState(false)
  const [spinning, setSpinning] = useState(false)

  const [roomList, setRoomList] = useState<Array<RoomType>>([])

  const loadData = async () => {
    try {
      setSpinning(true)
      const {
        data: { rooms },
      } = await getRoomList(type)
      setRoomList(rooms)
    } finally {
      setSpinning(false)
    }
  }

  useEffect(() => {
    loadData()
  }, [type])

  const handleImag = (src: string) => {
    setSrc(src)
    setVisible(true)
  }

  const search = (e: RadioChangeEvent) => {
    setType(e.target.value)
    loadData()
  }
  return (
    <div>
      <Image
        width={200}
        src={src}
        preview={{ visible, onVisibleChange: (value: boolean) => setVisible(value) }}
        style={{ display: 'none' }}
      />
      <Card>
        <Radio.Group options={options} defaultValue="A1" optionType="button" buttonStyle="solid" onChange={search} />
      </Card>
      <Spin spinning={spinning}>
        <Row gutter={16}>
          {roomList.map((room: RoomType) => (
            <Col span={6} className="mt" key={room.id}>
              <Card extra={<a onClick={() => handleImag(room.src)}>户型图</a>} title="房间号">
                <div style={{ textAlign: 'center' }}>
                  <h1>{room.roomNumber}</h1>
                </div>
                <div className="clearfix mt">
                  <h3 className="fl">装修情况</h3>
                  <h3 className="fr">{room.decorationType}</h3>
                </div>
                <div className="clearfix mt">
                  <h3 className="fl">房间面积</h3>
                  <h3 className="fr">{room.area}㎡</h3>
                </div>
                <div className="clearfix mt">
                  <h3 className="fl">出租单价</h3>
                  <h3 className="fr">{room.unitPrice}元/平/日</h3>
                </div>
              </Card>
            </Col>
          ))}
        </Row>
      </Spin>
    </div>
  )
}
